<template>
	<view class="goodsinfo">
		<u-navbar
			class="navbar_top"
			:title-size="28"
			:border-bottom="false"
			:back-icon-size="48"
			back-icon-color="#ffffff"
			:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
			title-color="#000000"
			:custom-back="goback"
			:background="{ background: ' transparent' }"
		>
			<view class="navbar-right" slot="right">
				<view class="icon_right" @click="gosharegain"><u-icon name="zhuanfa" color="#ffffff" size="40"></u-icon></view>
			</view>
		</u-navbar>
		<view class="goodsmain">
			<view class="swiper_top">
				<swiper class="swiper" :current="current" :indicator-dots="false" :autoplay="autoplay" :interval="interval" :duration="duration" @change="swiperchange">
					<swiper-item class="swiper_item" v-for="(item, index) in swiperList" :key="index"><u-image width="100%" height="712rpx" :src="item"></u-image></swiper-item>
				</swiper>
				<view class="dots"><u-tag :text="tagtext" shape="circleLeft" class="u-p-l-30 u-p-r-40" size="mini" color="#E0E0E0" bg-color="#909090" /></view>
				<view class="goplay">
					<u-icon name="play-circle" color="#909090" size="40" @click="goplay"></u-icon>
					<text>{{ videoduration }}</text>
				</view>
			</view>
			<u-gap height="18" bg-color="#F8F8F8"></u-gap>
			<view class="goods_info">
				<view class="goods_title u-line-2">
					<u-tag :text="someitem.user_type == 1 ? '天猫' : '淘宝'" mode="dark" type="error" />
					{{ someitem.title }}
				</view>
				<view class="tprice">
					<view class="tp_left">
						<text class="u-p-r-10">{{ someitem.user_type == 1 ? '天猫' : '淘宝' }}</text>
						<text>￥{{ someitem.reserve_price }}</text>
					</view>
					<view class="tp_right">包邮</view>
				</view>
				<view class="nowprice u-m-b-22">
					<view class="now_left">
						<text class="shh">到手价 ￥</text>
						<text class="price">{{ someitem.zk_final_price }}</text>
						<text class="shh u-p-l-10 u-p-r-8">收货后</text>
						<!-- <view class="butie u-flex"> -->
						<text>补贴 ￥</text>
						<text class="money">{{ someitem.money }}</text>
						<!-- </view> -->
					</view>
					<view class="now_right">已抢 {{ someitem.tk_total_sales }}件</view>
				</view>
				<view class="coupon" v-if="someitem.coupon_share_url != ''">
					<view class="coupon_left">
						<view class="coupon_price">
							<text class="u-font-18">{{ someitem.coupon_amount }}</text>
							元优惠券
						</view>
						<view class="timer">
							使用期限
							<text>{{ someitem.coupon_start_time }}</text>
							至
							<text>{{ someitem.coupon_end_time }}</text>
						</view>
					</view>
					<u-line color="#BBBBBB" border-style="dotted" :hair-line="false" margin="0 40rpx" direction="col"></u-line>
					<view class="coupon_right" name="someitem.coupon_amount" @click="tbkjump(goodsurl)">立即领券</view>
				</view>
				<view class="u-relative u-m-t-38" style="height: 18rpx;">
					<u-gap height="18" class="u-abso" style="width: 105%;margin-left: -16rpx;" bg-color="#eaeaea"></u-gap>
				</view>
				<!-- <view class="imgandtext"> -->
				<!-- <u-loadmore status="loadmore"  load-text="图文详情" /> -->
				<!-- <view class="img_top">-- 图文详情 --</view> -->
				<!-- <u-image width="100%" height="676rpx" :src="info.img"></u-image> -->
				<!-- </view> -->
				<view class="shopinfo">
					<u-image :src="info.logo" width="80rpx" height="80rpx" class="imgz"></u-image>
					<view class="shop_right">
						<view class="">{{ someitem.shop_title }}</view>
						<view class="u-flex u-m-t-10">
							<u-image v-if="someitem.user_type == 0" src="/static/image/tb.png" width="138rpx" height="34rpx" mode="widthFix"></u-image>
							<u-image v-else src="/static/image/tm.png" width="138rpx" height="34rpx" mode="widthFix"></u-image>
						</view>
					</view>
				</view>
				<view class="u-relative" style="height: 18rpx;margin-bottom: 112rpx;">
					<u-gap height="18" class="u-abso" style="width: 105%;margin-left: -16rpx;" bg-color="#eaeaea"></u-gap>
				</view>
				<view class="navigation">
					<view class="left">
						<!-- <view class="item">
							<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">客服</view>
						</view> -->
						<view class="item">
							<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">首页</view>
						</view>
						<view class="item car">
							<!-- <u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge> -->
							<u-icon name="star" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">收藏</view>
						</view>
					</view>
					<view class="right">
						<view class="buy btn u-m-r-38" @click="gosharegain">
							<view class="">
								<text>￥</text>
								<text class="u-font-32" style="font-weight: 600;">{{ someitem.money }}</text>
							</view>
							<view class="u-font-24" style="margin-top: -4rpx;">分享赚</view>
						</view>
						<view class="cart btn " @click="tbkjump(goodsurl)">
							<view class="">
								<text>￥</text>
								<text class="u-font-32" style="font-weight: 600;">{{ someitem.zk_final_price }}</text>
							</view>
							<view class="u-font-24" style="margin-top: -4rpx;">领券购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'goodsinfo',
	data() {
		return {
			current: 0,
			videoduration: `00'58"`,
			tagtext: '',
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			swiperList: [],
			info: {
				// logo: 'http://logo.taobaocdn.com/shop-logo/29/16/TB1xO1mktzJ8KJjSspkSuvF7VXa.jpg',
				// nick: '家家备简约家居品质生活',
				// user_type: 0,
				// small_images: {
				// 	string: [
				// 		'https://img.alicdn.com/i1/1660857504/TB2Ik3bi.OWBKNjSZKzXXXfWFXa_!!1660857504.jpg',
				// 		'https://img.alicdn.com/i4/1660857504/TB2BVlVjfImBKNjSZFlXXc43FXa_!!1660857504.jpg'
				// 	]
				// }
				// title: 'Apple 2019款 Macbook Pro 13.3【带触控栏】八代i5 8G 128G RP645显卡 深空灰 苹果笔记本电脑 MUHN2CH/A',
				// price: '2000.00',
				// num: '1.56',
				// coupon_price: '600',
				// start_time: '2020-09-28',
				// end_time: '2020-09-29',
				// rate: 1.85,
				// shop: '爱宠旗舰店',
				// img:
				// 	'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602844815058&di=1e5379cc6d157c311db2150419fb6af1&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F02%2F20200302140627_QMrZe.thumb.400_0.jpeg'
			},
			someitem: {},
			goodsurl: ''
		};
	},
	//实例创建完成后被立即调用
	created() {},
	watch: {
		current: function(val) {
			this.tagtext = val + 1 + '/' + this.swiperList.length;
		}
	},
	onLoad(option) {
		if (option) {
			this.someitem = JSON.parse(decodeURIComponent(option.item));
			console.log(this.someitem);
			if(this.someitem.url){
				this.someitem.coupon_share_url=this.someitem.url
			}
			if(this.someitem.butie){
				this.someitem.money=this.someitem.butie
			}	
			if(this.someitem.volume){
				this.someitem.tk_total_sales=this.someitem.volume
			}
			this.getgoodsdetail(this.someitem.item_id);
			this.getinfo(this.someitem.item_id);
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	//  onPullDownRefresh() {
	//  //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// console.log('refresh');
	// setTimeout(function() {
	// 	uni.stopPullDownRefresh(); //停止下拉刷新动画
	// }, 1000);
	//  },
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getinfo(id) {
			this.$u.api
				.makeshare({
					item_id: id
				})
				.then(res => {
					if (res.data.shortLinkInfo.couponUrl) {
						this.goodsurl = res.data.shortLinkInfo.couponUrl;
					} else {
						this.goodsurl = res.data.shortLinkInfo.url;
					}
					console.log(this.goodsurl);
				})
				.catch(err => {
					console.log(err);
				});
		},
		tbkjump(url) {
			// 淘宝的商品链接，换成需要访问的地址
			// let url = 'https://detail.tmall.com/item.htm?id=616607750344';
			let openUrl = url;
			// 因为 url 一般是从其它地方获取的，所以这里要将 http 和 https 删去
			// 也可以直接输入 https:// 之后的内容，则不需要此步判断，直接调用 plus.runtime.openURL
			if (url.substr(0, 5) === 'https') {
				openUrl = `taobao://${url.substr(8)}`;
			} else if (url.substr(0, 4) === 'http') {
				openUrl = `taobao://${url.substr(7)}`;
			}
			console.log('跳转' + openUrl);
			plus.runtime.openURL(openUrl, function(res) {
				uni.showModal({
					content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
					success: function(res) {
						if (res.confirm) {
							plus.runtime.openURL(url);
						}
					}
				});
			});
		},
		swiperchange(val) {
			// console.log(val.detail.current)
			this.current = val.detail.current;
		},
		getgoodsdetail(id) {
			this.$u.api
				.getgoodsdetail({
					item_id: id
				})
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.info = res.data;
						this.swiperList = res.data.small_images.string;
						this.tagtext = 1 + '/' + this.swiperList.length;
					}
				});
		},
		goplay() {},
		gosharegain() {
			this.info.someitem = this.someitem;
			uni.navigateTo({
				url: '/pages/goodsrebate/goodsinfo/sharegain?item=' + encodeURIComponent(JSON.stringify(this.info))
			});
		},
		goback() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goodsinfo {
	position: relative;
	background-color: $lt-bg;
	.navbar_top::v-deep {
		.u-icon__icon {
			width: 60rpx;
			height: 60rpx;
			// line-height: 68rpx;
			background-color: #909090;
			border-radius: 100rpx;
		}
		.uicon-nav-back:before {
			margin-left: 4rpx;
		}
		.uicon-zhuanfa:before {
			margin-left: 10rpx;
		}
	}
	.navbar-right {
		.icon_right {
			margin-right: 20rpx;
		}
	}
	.goodsmain {
		width: 100%;
		position: absolute;
		top: 0;
		background-color: #ffffff;
		overflow: hidden;
		.swiper_top {
			position: relative;
			.swiper::v-deep {
				height: 712rpx !important;
				.swiper_item {
					height: 712rpx !important;
					width: 100% !important;
				}
			}
			.dots {
				position: absolute;
				right: 0;
				bottom: 88rpx;
			}
			.goplay {
				width: 140rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				left: 50%;
				bottom: 88rpx;
				// transform:translate(-50%,0);
				margin-left: -70rpx;
			}
		}
		.goods_info {
			width: 720rpx;
			margin: 0 auto;
			.goods_title {
				font-weight: 600;
				font-size: 26rpx;
				line-height: 50rpx;
				/deep/.u-tag {
					border-radius: 16rpx;
					margin-right: 20rpx;
				}
			}
			.tprice {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #787882;
				padding: 20rpx 0 10rpx 0;
			}
			.nowprice {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #f77f7f;
				position: relative;
				height: 42rpx;
				line-height: 42rpx;
				// background-color: blue;
				.now_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.price {
						// font-weight: 600;
					}
					.shh {
						color: #929692;
					}
					/* #ifdef APP-PLUS */
					// .price {
					// 	// font-weight: 600;
					// 	margin-top: 10rpx;
					// }
					// .money{
					// 	margin-top: 10rpx;
					// }
					/* #endif */
				}
				.now_right {
					color: #787882;
					font-weight: 600;
				}
			}
			.coupon {
				width: 670rpx;
				height: 116rpx;
				background-color: #ff452d;
				border-radius: 16rpx;
				padding: 20rpx 40rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #ffffff;
				text-align: center;
				.coupon_right {
					font-weight: 600;
				}
				.timer {
					font-size: 24rpx;
				}
			}
			.imgandtext {
				width: 100%;
				background-color: #ffffff;
				// height: 20rpx;
				text-align: center;
				margin-top: 28rpx;
				.img_top {
					color: #dfdfdf;
					margin: 0 auto;
					margin-bottom: 44rpx;
				}
			}
			.shopinfo {
				width: 100%;
				height: 116rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.imgz {
					margin: 18rpx 24rpx;
				}
			}
			.navigation {
				width: 100%;
				position: fixed;
				bottom: 0;
				display: flex;
				// margin-top: 100rpx;
				// border: solid 2rpx #f2f2f2;
				background-color: #ffffff;
				padding: 16rpx 0;
				justify-content: space-between;
				.left {
					display: flex;
					font-size: 20rpx;
					.item {
						margin: 0 30rpx;
						&.car {
							text-align: center;
							position: relative;
							.car-num {
								position: absolute;
								top: -10rpx;
								right: -10rpx;
							}
						}
					}
				}
				.right {
					display: flex;
					font-size: 28rpx;
					justify-content: space-between;
					align-items: center;
					.btn {
						width: 220rpx;
						height: 80rpx;
						// line-height: 80rpx;
						// padding: 0 30rpx;
						text-align: center;
						border-radius: 36rpx;
						color: #ffffff;
					}
					.cart {
						background-color: #ed3f14;
						margin-right: 30rpx;
					}
					.buy {
						background-color: #fbab07;
					}
				}
			}
		}
	}
}
</style>
